<template>
  <div class="reset-password">
    <a-form
      class="user-form"
      :model="state.pInfo"
      :label-col="{ span: 2 }"
      :wrapper-col="{ span: 4 }"
    >
      <a-form-item label="当前密码">
        <a-input-password v-model:value="state.pInfo.currentPassword" placeholder="输入当前密码" />
      </a-form-item>
      <a-form-item label="新密码">
        <a-input-password v-model:value="state.pInfo.newPassword" placeholder="输入新密码" />
      </a-form-item>
      <a-form-item label="确认密码">
        <a-input-password v-model:value="state.pInfo.newPasswordConfirm" placeholder="再次输入新密码" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 4, offset: 2 }">
        <a-button type="primary" block>保存</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import {defineComponent, reactive} from 'vue';

const state = reactive({
  pInfo: {
    currentPassword: '',
    newPassword: '',
    newPasswordConfirm: ''
  }
});

export default defineComponent({
  setup() {
    return {
      state
    };
  }
});
</script>
